<template>
	<view class="container">
		<view class="d-app">
			<view class="left">
				<image :src="$img_path('/mall/5.png')" mode="aspectFill"></image>
				<view class="info">
					<view class="name">
						软件名称服务人员版
					</view>
					<view class="text">
						你有能力，我有舞台
					</view>
				</view>
			</view>
			<button>下载APP</button>
		</view>
		
		<view class="content">
			<view class="top-text">
				<view class="t-1">
					填写您的基本信息
				</view>
				<view class="t-2">
					我们将尽快与您取得联系
				</view>
				<view class="t-3">
					并为您提供最专业的培训服务
				</view>
			</view>
			<view class="form-box">
				<view class="form-item select-city">
					<text>工作城市</text>
					<view class="form-content">
						<!--  @click="openLocation" -->
						<view class="select">
							<!-- <text v-if="city">{{city}}</text>
							<text v-else>请选择城市</text> -->
							<picker @change="bindPickerChange" mode = region :value="city">
								<view class="uni-input">{{city.length>0 ? city.join('/') : '请选择'}}</view>
							</picker>
							<image :src="$img_path('/mine/chevron_right.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="form-item sex">
					<text>性别</text>
					<view class="form-content">
						<view class="checkbox">
							<view class="b-1" @click="sex=1">
								<image v-if="sex==1" :src="$img_path('/pagesMine/60.png')" mode="widthFix"></image>
								<image v-else :src="$img_path('/pagesMine/61.png')" mode="widthFix"></image>
								<text>男</text>
							</view>
							<view class="b-1" @click="sex=2">
								<image v-if="sex==2" :src="$img_path('/pagesMine/60.png')" mode="widthFix"></image>
								<image v-else :src="$img_path('/pagesMine/61.png')" mode="widthFix"></image>
								<text>女</text>
							</view>
						</view>
					</view>
				</view>
				<view class="form-item phoneNumber">
					<text>姓名</text>
					<view class="form-content">
						<view class="input">
							<input type="text" v-model="name" placeholder="请输入姓名" />
						</view>
					</view>
				</view>
				<view class="form-item phoneNumber">
					<text>手机号</text>
					<view class="form-content">
						<view class="input">
							<input type="number" v-model="mobile" placeholder="请输入手机号" />
						</view>
					</view>
				</view>
				
				<view class="get-code">
					<view class="form-item code">
						<text>验证码</text>
						<view class="form-content">
							<view class="input">
								<input type="number" v-model="captcha" placeholder="请输入验证码" />
							</view>
						</view>
					</view>
					<button @click="s_status==0 ? getCode() : ''">{{s_status==0 ? '获取验证码' : s_status==3 ? '获取中...' : s_status==1 ? timeout+'s' : '再次获取'}}</button>
				</view>
				
				<view class="submit-btn">
					<button @click="submit">立即报名</button>
					<view class="check-xy" @click="isCheck=!isCheck">
						<image v-if="isCheck" :src="$img_path('/pagesMine/60.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/61.png')" mode="widthFix"></image>
						<view>
							我已阅读并同意<text>《用户使用协议》和《隐私政策》</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<popupBox ref="selectCity" type="bottom" :isSlot="true">
			<view class="select-city-box">
				<view class="title">
					<text>请选择省市区</text>
					<image :src="$img_path('/mall/15.png')" @click="closeSelectCity" mode="widthFix"></image>
				</view>
				
				<view class="s-value">
					<view class="province" @click="check(0)">
						{{province ? province.text : '选择省份'}}
					</view>
					<view class="city" v-if="province" @click="check(1)">
						{{city ? city.text : '请选择'}}
					</view>
					<view class="arae" v-if="city" @click="check(2)">
						{{arae ? arae.text : '请选择'}}
					</view>
				</view>
				<view class="s-list">
					<view class="s-item">
						<text>A</text>
						<view class="name">
							安徽省
						</view>
					</view>
					<view class="s-item">
						<text>B</text>
						<view class="name" v-for="item in 4" @click="selectChange()">
							北京
						</view>
					</view>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import { sendCode } from '@/utils/api/public.js'
	import { getLocation } from "@/utils/api/serviceApi.js"
	import { recruitJishi } from '@/utils/api/userApi.js'
	import popupBox from '@/components/popup/popup.vue'
	export default {
		components:{
			popupBox
		},
		data() {
			return {
				isCheck:false,
				
				select_city_index:0,
				province:null,
				city:null,
				arae:null,
				
				city:[],
				sex:1,
				name:'',
				mobile:'',
				captcha:'',
				
				timeout:60,
				s_status:0,
			};
		},
		methods:{
			selectChange(){
				console.log()
				if(this.select_city_index==0){
					this.province = {
						text:'北京',
						value:1
					}
					this.select_city_index=1
					this.city = null
					this.arae = null
				}else if(this.select_city_index==1){
					this.city = {
						text:'北京',
						value:2
					}
					this.select_city_index=2
					this.arae = null
				}else{
					this.arae = {
						text:'北京',
						value:2
					}
				}
			},
			check(type){
				this.select_city_index=type
			},
			closeSelectCity(){
				this.$refs.selectCity.close()
				
			},
			
			// 获取验证码
			getCode(){
				this.s_status=3
				uni.showLoading({
					title:'获取中...'
				})
				sendCode({
					mobile:this.mobile,
					event:'recruit'
				}).then(res=>{
					uni.hideLoading()
					if(res.code!=1){
						this.s_status = 0
						return
					}
					this.s_status = 1
					let i = setInterval(()=>{
						if(this.timeout>0){
							this.timeout--
						}else{
							clearInterval(i)
							this.timeout = 60
							this.s_status = 2
						}
					},1000)
				})
			},
			
			
			// 选择地区
			bindPickerChange(val){
				console.log(val,'-')
				this.city = val.detail.value
			},
			
			openLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.chooseLocation({
							latitude: latitude,
							longitude: longitude,
							success: (data) => {
								console.log('success', data);
								getLocation({
									lat: Number(data.latitude.toFixed(6)),
									lng: Number(data.longitude.toFixed(6))
								}).then(res => {
									console.log("res", res)
									const {
										adcode,
										city,
										citycode,
										country,
										district,
										province
									} = res.data.regeocode.addressComponent
									this.city = province+'/'+city+'/'+district
								})
							}
						});
					}
				});
			
			},
			
			submit(){
				uni.showLoading({
					title:'提交中...'
				})
				recruitJishi({
					city:this.city.join('/'),
					sex:this.sex,
					mobile:this.mobile,
					captcha:this.captcha
				}).then(res=>{
					uni.hideLoading()
					if(res.code!=1){
						return
					}
					uni.showToast({
						title:'提交成功',
						icon:'none',
						success:()=>{
							uni.redirectTo({
								url:'/pagesMine/recruit/submit'
							})
						}
					})
				})
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	.d-app{
		width: 100%;
		padding: 16rpx 22rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		border: 2rpx solid #DBDBDB;
		.left{
			display: flex;
			&>image{
				width: 92rpx;
				height: 92rpx;
			}
			.info{
				padding-left: 20rpx;
				.name{
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
				}
				.text{
					font-weight: 400;
					font-size: 24rpx;
					color: #717171;
					line-height: 34rpx;
					margin-top: 8rpx;
				}
			}
		}
		&>button{
			width: 158rpx;
			height: 56rpx;
			background: #E72A2A;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 56rpx;
		}
	}
	
	.content{
		padding: 114rpx 22rpx 0;
		.top-text{
			.t-1{
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				line-height: 50rpx;
			}
			.t-2{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-top: 12rpx;
			}
			.t-3{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-top: 12rpx;
			}
		}
		.form-box{
			margin-top: 36rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			.form-item{
				padding: 24rpx 18rpx 22rpx 22rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&>text{
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
				}
				&.select-city,&.phoneNumber,&.code{
					border-bottom: 2rpx solid #EEEEEE;
				}
				.form-content{
					.select{
						display: flex;
						justify-content: flex-end;
						align-items: center;
						text{
							font-weight: 500;
							font-size: 28rpx;
							color: #B4B4B4;
							line-height: 40rpx;
						}
						&>image{
							width: 32rpx;
							height: 32rpx;
							margin-left: 12rpx;
						}
					}
					.checkbox{
						display: flex;
						justify-content: flex-end;
						align-items: center;
						&>view{
							display: flex;
							align-items: center;
							&:last-child{
								margin: 0 18rpx 0 60rpx;
							}
							image{
								width: 44rpx;
								height: 44rpx;
							}
							text{
								font-weight: 400;
								font-size: 32rpx;
								color: #000000;
								line-height: 44rpx;
								margin-left: 16rpx;
							}
						}
					}
					.input{
						input{
							text-align: right;
							font-weight: 400;
							font-size: 32rpx;
							color: #000000;
						}
					}
				}
			}
			.get-code{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 18rpx;
				box-sizing: border-box;
				.form-item{
					width: calc(100% - 158rpx);
				}
				button{
					width: 138rpx;
					height: 48rpx;
					background: #FFD4D4;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #E72A2A;
					line-height: 48rpx;
				}
			}
			
			.submit-btn{
				padding: 40rpx 36rpx 52rpx;
				box-sizing: border-box;
				&>button{
					width: 100%;
					height: 96rpx;
					background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
					border-radius: 80rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 96rpx;
				}
				&>view{
					display: flex;
					align-items: center;
					margin-top: 26rpx;
					&>image{
						width: 30rpx;
						height: 30rpx;
					}
					view{
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
						padding-left: 12rpx;
						box-sizing: border-box;
						text{
							color: #E72A2A;
						}
					}
				}
			}
		}
	}
}

.select-city-box{
	.title{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding-top: 28rpx;
		text{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
		}
		image{
			position: absolute;
			top: 32rpx;
			right: 22rpx;
			width: 41rpx;
			height: 41rpx;
		}
	}
	.s-value{
		padding: 66rpx 22rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		&>view{
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			line-height: 40rpx;
			&:not(:first-child){
				margin-left: 120rpx;
			}
		}
	}
	.s-list{
		width: 100%;
		height: 582rpx;
		overflow-y: auto;
		padding: 0 22rpx 50rpx;
		box-sizing: border-box;
		.s-item{
			width: 100%;
			padding-left: 30rpx;
			box-sizing: border-box;
			position: relative;
			&>text{
				position: absolute;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				left: 0;
				top: 0;
			}
			.name{
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 48rpx;
			}
		}
	}
}
</style>
